<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('appointment.quick Search Fields') })"
        >
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef">
            <template #healthItems>
                <el-table-column label="服务项目" width="160" align="center">
                    <template #default="scope">
                        <div v-if="scope.row && scope.row.health_items && scope.row.health_items.length > 0" class="health-items-container">
                            <el-tag v-for="(item, index) in scope.row.health_items" :key="index" size="small" type="success" class="health-item-tag">
                                {{ item.name }}
                                <span v-if="item.duration" class="duration-text">({{ item.duration }}分钟)</span>
                            </el-tag>
                        </div>
                        <span v-else class="no-items-text">无</span>
                    </template>
                </el-table-column>
            </template>
        </Table>
        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'

defineOptions({
    name: 'appointment',
})

const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/Appointment/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('appointment.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            // { label: t('appointment.room_id'), prop: 'room_id', align: 'center', operator: 'eq' },
            {
                label: t('appointment.room__name'),
                prop: 'room.name',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tags',
                operator: 'LIKE',
            },
            // {
            //     label: '门店',
            //     prop: 'store.name',
            //     align: 'center',
            //     operatorPlaceholder: t('Fuzzy query'),
            //     render: 'tags',
            //     operator: 'LIKE',
            // },
            // {
            //     label: t('appointment.medical_staff_id'),
            //     prop: 'medical_staff_id',
            //     align: 'center',
            //     operatorPlaceholder: t('Fuzzy query'),
            //     operator: 'LIKE',
            // },
            {
                label: t('appointment.medicalstaff__name'),
                prop: 'medicalStaff.name',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tags',
                operator: 'LIKE',
            },
            {
                label: t('appointment.patient_name'),
                prop: 'patient_name',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('appointment.patient_phone'),
                prop: 'patient_phone',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('appointment.patient_gender'),
                prop: 'patient_gender',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                replaceValue: { '1': t('appointment.patient_gender 1'), '2': t('appointment.patient_gender 2') },
            },
            // { label: t('appointment.patient_age'), prop: 'patient_age', align: 'center', operator: 'RANGE', sortable: false },
            { label: '备注', prop: 'symptoms', align: 'center', operator: false },
            {
                label: '养生项目',
                // prop: 'health_items',
                align: 'center',
                // operator: false,
                render: 'slot',
                slotName: 'healthItems',
                width: 200,
            },

            // { label: t('appointment.appointment_date'), prop: 'appointment_date', align: 'center', operator: false},
            { label: t('appointment.start_time'), prop: 'start_time', align: 'center', operator: 'egt', render: 'datetime', sortable: 'custom' },
            { label: t('appointment.end_time'), prop: 'end_time', align: 'center', operator: 'elt', render: 'datetime', sortable: 'custom' },
            {
                label: t('appointment.is_cancel'),
                prop: 'is_cancel',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                replaceValue: { '1': t('appointment.is_cancel 1'), '0': t('appointment.is_cancel 0') },
            },
            { label: t('appointment.cancel_reason'), prop: 'cancel_reason', align: 'center', operator: false },
            // { label: t('appointment.admin_id'), prop: 'admin_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            {
                label: t('appointment.operator__username'),
                prop: 'operator.username',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tags',
                operator: 'LIKE',
            },
            // { label: t('appointment.created_at'), prop: 'created_at', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },
            // {
            //     label: t('appointment.source'),
            //     prop: 'source',
            //     align: 'center',
            //     operatorPlaceholder: t('Fuzzy query'),
            //     operator: 'LIKE',
            //     sortable: false,
            // },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { is_cancel: '0' },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getData()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">
.health-items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.health-item-tag {
    margin: 2px;
    max-width: 180px;

    .duration-text {
        font-size: 11px;
        opacity: 0.8;
        margin-left: 2px;
    }
}

.no-items-text {
    color: #999;
    font-size: 12px;
}
</style>
